<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>zan-admin后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <script src="static/js/checkie&edge.js"></script>
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/zan-admin.min.css" rel="stylesheet">
    <!-- 插件依赖 -->
    <link href="lib/formvalidation/css/formValidation.min.css" rel="stylesheet">
</head>

<body>
    <header class="zan-header">
        <span class="glyphicon glyphicon-menu-hamburger zan-sidebar-toggle" aria-hidden="true"></span>
        <div class="zan-header-center">
            <div class="zan-nav-item"><a href="index.html">首页</a></div>
            <div class="zan-nav-item"><a href="platform.html">平台</a></div>
            <div class="zan-nav-item"><a href="#">商城</a></div>
            <div class="zan-nav-item"><a href="#">运营</a></div>
        </div>
        <div class="zan-avatar-wrap">
            <div class="dropdown">
                <img class="zan-avatar" data-toggle="dropdown" src="static/images/avatar.jpg" alt="头像">
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">admin</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">超级管理员</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">通知 <span class="badge">10</span></a></li>
                    <li><a href="#">个人资料</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="#">清空缓存</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="page_login.html">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>
    <aside class="zan-aside">
        <div class="zan-brand">
            <a href="index.html">zan-admin后台管理系统</a>
        </div>
        <ul class="zan-sidebar">
            <li>
                <a href="index.html">
                    <span class="glyphicon glyphicon-home" aria-hidden="true"></span>后台首页
                </a>
            </li>
            <li>
                <a href="fonticon.html">
                    <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>字体图标
                </a>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>日期选择器
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_flatpickr.html">flatpickr</a></li>
                    <li><a href="plug_datetimepicker.html">datetimepicker</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>文件上传
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_fileupload.html">fileupload</a></li>
                    <li><a href="plug_webuploader.html">webuploader</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>图表插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_chart.html">chart</a></li>
                    <li><a href="plug_echarts.html">echarts</a></li>
                </ul>
            </li>

            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>富文本
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_tinymce.html">tinymce</a></li>
                    <li><a href="plug_editor.md.html">editor.md</a></li>
                    <li><a href="plug_ueditor.md.html">ueditor</a></li>
                </ul>
            </li>
            <li class="haschildren open">
                <a href="#">
                    <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>表单验证
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_formvalidation.html">formvalidation</a></li>
                    <li><a href="plug_jquery.validation.html">jquery.validation</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>其它插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_sweetalert.html">sweetalert</a></li>
                    <li><a href="plug_notify.html">notify</a></li>
                    <li><a href="plug_timeline.html">timeline</a></li>
                    <li><a href="plug_clipboard.html">clipboard</a></li>
                    <li><a href="plug_croppie.html">croppie</a></li>
                    <li><a href="plug_lightbox.html">lightbox</a></li>
                    <li><a href="plug_touchslider.html">touchslider</a></li>
                    <li><a href="plug_rocket.html">rocket</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-file" aria-hidden="true"></span>示例页面
                </a>
                <ul class="zan-submenu">
                    <li><a href="page_login.html" target="_blank">登录页面</a></li>
                    <li><a href="page_curd.html">CURD页面</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="page_error.html" target="_blank">错误页面</a></li>
                </ul>
            </li>
        </ul>
    </aside>
    <!-- 面包屑导航 -->
    <div class="zan-breadcrumb">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ol>
    </div>

    <main class="zan-main">
        <div class="container-fluid">
            <blockquote>
                <p>更多详细内容可查阅官网</p>
                <p>官方网站:
                    <a href="https://github.com/formvalidation/formvalidation">formvalidation</a>
                </p>
                <footer>zan-admin</footer>
            </blockquote>
            <div class="panel panel-default zan-panel-default">
                <div class="panel-heading">基本示例</div>
                <div class="panel-body">
                    <form id="demo-1" method="post" action="target.php">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" name="username" class="form-control" id="username" />
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" name="password" class="form-control" id="password" />
                        </div>
                        <div class="form-group">
                            <label for="confirmPassword">确认密码</label>
                            <input type="password" name="confirmPassword" class="form-control" id="confirmPassword" />
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="text" name="email" class="form-control" id="email" />
                        </div>
                        <div class="form-group">
                            <label for="email">年纪</label>
                            <input type="text" name="age" class="form-control" id="age" />
                        </div>



                        <div class="form-group">
                            <label class="control-label" for="inputError4">性别</label>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="gender" id="optionsRadios1" value="option1" />
                                    男
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="gender" id="optionsRadios2" value="option2" />
                                    女
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="gender" id="optionsRadios3" value="option3" />
                                    其它
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="captcha" id="captchaOperation">11+12=</label>
                            <input type="text" name="captcha" class="form-control" id="captcha" />
                        </div>

                        <div class="form-group">
                            <div class="checkbox">
                                <label for="agree">
                                    <input type="checkbox" name="agree" value="agree" id="agree" />
                                    同意条款和条件
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default">提交</button>
                        </div>

                    </form>
                </div>
            </div>


            <div class="panel panel-default zan-panel-default">
                <div class="panel-heading">选择验证</div>
                <div class="panel-body">
                    <form id="demo-2" method="post" class="form-horizontal" action="target.php">
                        <div class="form-group">
                            <label class="col-lg-1 control-label">编程语言</label>
                            <div class="col-lg-11">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="net" /> .Net
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="java" /> Java
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="c" /> C/C++
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="php" /> PHP
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="perl" /> Perl
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="ruby" /> Ruby
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="python" /> Python
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="languages[]" value="javascript" />
                                        Javascript
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-1 control-label">编辑器</label>
                            <div class="col-lg-11">
                                <select class="form-control" name="editors[]" multiple="multiple"
                                    style="height: 200px;">
                                    <option value="" disabled>选择 2 - 3 个</option>
                                    <option value="atom">Atom</option>
                                    <option value="eclipse">Eclipse</option>
                                    <option value="netbeen">NetBean</option>
                                    <option value="nodepadplusplus">Nodepad++</option>
                                    <option value="phpstorm">PHP Storm</option>
                                    <option value="sublime">Sublime</option>
                                    <option value="webstorm">Web Storm</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 col-lg-offset-1">
                                <button type="submit" class="btn btn-default">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>


            <div class="panel panel-default zan-panel-default">
                <div class="panel-heading">异步远程验证示例</div>
                <div class="panel-body">
                    <form id="demo-3" class="form-horizontal">
                        <div class="form-group">
                            <label for="username-demo-3" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" name="username" class="form-control" id="username-demo-3"
                                    placeholder="用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">登录</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/zan-admin.min.js"></script>
    <!-- 插件依赖 -->
    <script src="lib/formvalidation/js/formValidation.min.js"></script>
    <script src="lib/formvalidation/js/framework/bootstrap.min.js"></script>
    <script src="lib/formvalidation/js/language/zh_CN.js"></script>

    <!-- 基本示例 -->
    <script>
        function randomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        $("#captchaOperation").html(
            [randomNumber(1, 100), "+", randomNumber(1, 200), "="].join(" ") + "?"
        );

        $("#demo-1").formValidation({
            //配置语言
            locale: "zh_CN",
            //图标
            icon: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            //验证字段
            fields: {
                username: {
                    validators: {
                        notEmpty: true, //也可以像下面那样用
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: "用户名的长度为6-30个字符（这是限制长度的）"
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: "用户名只能由字母、数字、点和下划线组成"
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: "密码不能为空"
                        },
                        different: {
                            field: "username",
                            message: "密码不能和用户名相同"
                        }
                    }
                },
                confirmPassword: {
                    validators: {
                        notEmpty: true,
                        identical: {
                            field: "password",
                            message: "密码不一致"
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: "电子邮件不能为空"
                        },
                        //验证正确的邮箱
                        emailAddress: true
                    }
                },
                gender: {
                    validators: {
                        notEmpty: {
                            message: "必须选择一个性别"
                        }
                    }
                },
                age: {
                    validators: {
                        notEmpty: {
                            message: "必须填写真实年龄"
                        },
                        lessThan: {
                            value: 100,
                            inclusive: true,
                            message: '你能活100岁算你牛逼啊'
                        },
                        greaterThan: {
                            value: 10,
                            inclusive: false,
                            message: '10岁小孩子不能注册我们的网站'
                        }
                    }
                },
                // 前端验证码
                captcha: {
                    validators: {
                        callback: {
                            message: "小学没毕业？",
                            callback: function (value, validator, $field) {
                                var items = $("#captchaOperation")
                                    .html()
                                    .split(" "),
                                    sum = parseInt(items[0]) + parseInt(items[2]);
                                return value == sum;
                            }
                        }
                    }
                },
                agree: {
                    validators: {
                        notEmpty: {
                            message: "您必须同意我们的条款和条件"
                        }
                    }
                }
            }
        });
    </script>

    <!-- 选择验证 -->
    <script>
        $('#demo-2').formValidation({
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                'languages[]': {
                    validators: {
                        choice: {
                            min: 2,
                            max: 4,
                            message: '请选择 %s - %s 个你比较擅长的语言'
                        }
                    }
                },
                'editors[]': {
                    validators: {
                        choice: {
                            min: 2,
                            max: 3,
                            message: '请选择 %s - %s 个你比较喜欢的编辑器'
                        }
                    }
                }
            }
        });
    </script>


    <script>
        $('#demo-3').formValidation({
            //配置语言
            locale: "zh_CN",
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    verbose: false,//表单验证都通过后再执行远程验证remote
                    validators: {

                        notEmpty: true,
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: "用户名的长度为6-30个字符（这是限制长度的）"
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: "用户名只能由字母、数字、点和下划线组成"
                        },
                        remote: {
                            type: 'POST',
                            // 这里填写远程地址，后台返回{ "valid": true }//通过验证 { "valid": false }//不通过 '该账号已存在'
                            url: 'remote.php',
                            message: '该账号已经被注册',
                            delay: 2000

                        }
                    }
                }
            }
        });
    </script>
</body>

</html>